<template>
  <div class="flex flex-col h-full">
    <searchContainer @search="queryList" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="flex-1" :model="formState" :colon="false" :label-col="{ style: { width: '70px' } }">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item name="pyjm">
              <a-input v-model:value="formState.pyjm" placeholder="角色名称" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </searchContainer>
    <a-row class="mt-2">
      <a-col :span="12">
        <a-card class="flex-1">
          <a-space class="mb-3">
            <a-button type="primary" @click="onClickEdit()">新增</a-button>
          </a-space>
          <baseTable :loading="loading" column-code="00001095" fill :data-source="tableData" bordered :scroll="{ x: 810 }">
            <template #bodyCell="{ column }">
              <template v-if="column.dataIndex === 'action'">
                <a-button type="link" size="small" @click="onClickEdit()"> 修改 </a-button>
                <a-divider type="vertical" />
                <confirmModal description="确定删除?" @confirm="onConfirm">
                  <a-button type="text" danger size="small"> 删除 </a-button>
                </confirmModal>
                <a-divider type="vertical" />
                <a-button type="link" size="small"> 保存权限 </a-button>
              </template>
            </template>
          </baseTable>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card class="flex-1 ml-3 card-height">
          <div class="allocation mb-8">分配权限</div>
          <div class="flex justify-center">
            <template v-if="authorityData.length">
              <a-tree
                v-model:expandedKeys="expandedKeys"
                v-model:selectedKeys="selectedKeys"
                v-model:checkedKeys="checkedKeys"
                checkable
                check-strictly
                :tree-data="authorityData"
              >
                <template #title="{ title, key }">
                  <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
                  <template v-else>{{ title }}</template>
                </template>
              </a-tree>
            </template>
            <template v-else>
              <a-empty />
            </template>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <Edit v-model:open="editOpen" :row-data="rowData" @success="onSuceess" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'
import searchContainer from '@/components/SearchContainer'
import baseTable from '@/components/BaseTable'
import confirmModal from '@/components/ConfirmModal'
import Edit from './components/Edit.vue'

const rowData = ref(null)
const editOpen = ref(false)
const loading = ref(false)
const tableData = ref([
  {
    id: 1,
    sxh: 1,
    jsmc: '鹿晗'
  },
  {
    id: 2,
    sxh: 2,
    jsmc: '易烊千玺'
  }
])
const formRef = ref(null)
const tableItem = ref({})
const formState = ref({})
const expandedKeys = ref(['0-0-0', '0-0-1']) // 默认展开
const selectedKeys = ref(['0-0-0', '0-0-1']) // 默认选中
const checkedKeys = ref(['0-0-0', '0-0-1']) // 选中的key
const authorityData = [
  {
    title: '伤病员分类后送',
    key: '0-0',
    children: [
      {
        title: '伤病员接收',
        key: '0-0-0',
        // disabled: true,
        children: [
          {
            title: '检伤登记',
            key: '0-0-0-0'
            // disableCheckbox: true
          },
          {
            title: '修改信息',
            key: '0-0-0-1'
          },
          {
            title: '导出名单',
            key: '0-0-0-2'
          },
          {
            title: '伤票信息',
            key: '0-0-0-3'
          },
          {
            title: '新伤病员',
            key: '0-0-0-4'
          },
          {
            title: '全部删除',
            key: '0-0-0-5'
          },
          {
            title: '删除信息',
            key: '0-0-0-6'
          }
        ]
      },
      {
        title: '伤病员后送',
        key: '0-0-1',
        children: [
          {
            key: '删除信息',
            title: 'sss'
          }
        ]
      }
    ]
  }
]

const onClickEdit = () => {
  editOpen.value = true
}

const onConfirm = async () => {
  const { code, msg } = await post('/outp/mzdj/doCancel?jlbh=' + tableItem.value.jzbh)
  if (code !== 0) return message.error(msg || '退号失败')
  message.success('退号成功')
  queryList()
}
const queryList = async () => {
  loading.value = true
  // formState.value
  const { code } = await post('/outp/mzdj/getOutpRecordInfoList', {
    brGzdw: formState.value.brGzdw,
    brId: '',
    brSfz: formState.value.brSfz,
    eddate: formState.value['dateRange']?.[1],
    ghys: formState.value.ghys,
    ghzt: formState.value.ghzt,
    ksdm: formState.value.ksdm.length ? formState.value.ksdm : [],
    pyjm: formState.value.pyjm,
    stdate: formState.value['dateRange']?.[0],
    zdmc: formState.value.zdmc
  })
  if (code !== 0) return
  //   tableData.value = data
  loading.value = false
}
const onSuceess = () => {
  editOpen.value = false
  queryList()
}
onMounted(() => {
  //   queryList()
})
// const onExport = () => {
//   const title = `登记检索${formState.value['dateRange']}`
//   const head = columns.map((item) => item.title)
//   const data = tableData.value.map((item) => {
//     return columns.map((col) => {
//       return item[col.dataIndex]
//     })
//   })
//   downloadCSV(title, head, data).then(() => {
//     message.success('导出成功')
//   })
// }
</script>
<style lang="less" scoped>
.card-height {
  height: calc(100vh - 115px);
  .allocation {
    box-sizing: border-box;
    padding-left: 15px;
    border-left: 5px solid #6385ff;
  }
}
</style>
